.flex, .flex-ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.flex {
    z-index: 2;
    align-items: center;
    padding: var(--gap-divs) var(--edge-lr);
}

.statistics {
    --trfm: translateX(1rem);
    --trfm-or: left;
}

.part-title {
    line-height: 1rem;
    color: hsl(var(--font-color) / .2);
}

.num .text-effect {
    animation-name: opacity;
    animation-fill-mode: backwards;
    font-style: normal;
}

em {
    font-style: normal;
}

.count-num h6 {
    opacity: 0.6;
    font-size: var(--font-size-medium);
}

.count-num .num {
    position: relative;
    display: inline-block;
    font-size: max(1.5rem, 3vw, 120vw / var(--count, -1));
    white-space: nowrap;
    font-variant: tabular-nums;
    color: hsl(var(--hue) var(--satura) 77% / .65);
    background: linear-gradient(135deg, #0000 0, currentColor 25%, currentColor 75%, #0000) no-repeat 0 / 400%;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5PX currentColor;
    -webkit-background-clip: text;
    cursor: alias;
    animation: perspective-reverse .5s ease-out forwards, numbg-reverse .7s ease-out forwards;
}

.count-num #hot-num::after {
    content: "星辰温度";
    font-weight: 400;
    position: absolute;
    top: 53%;
    right: 0;
    bottom: 0;
    width: 2em;
    white-space: normal;
    font-size: max(1.5rem / 6, 10vw / 6);
    font-family: var(--font-family-slogn);
    -webkit-text-stroke: thin var(--title-color);
    line-height: 1;
}

.count-num .num:hover {
    animation: perspective-hover .5s ease-in forwards, numbg-hover .7s ease-in forwards;
}

.count-num {
    z-index: 2;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    flex: 100%;
}

.statistics :where(ul, li) {
    margin: 0;
}

.count-num.web {
    position: relative;
    display: grid;
    font-size: max(1.5rem, 3vw);
    gap: max(var(--gap-divs), 5vw);
    grid: auto / 1fr 1fr;
}

@media (min-width: 1153px) {
    .count-num.web {
        grid: auto / repeat(6, 1fr);
        background: none;
        box-shadow: none;
        padding-inline: 0;
    }
}

@media (max-width: 768px) {
    .statistics {
        padding: var(--gap-divs) var(--edge-lr);
    }
}

@keyframes perspective-hover {
    0% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
        background-position: 200% 100%
    }
    50% {
        transform: perspective(1600px) rotateX(5deg) rotateY(5deg) translateZ(50px)
    }
    100% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(100px);
        background-position: 50% 100%
    }
}

@keyframes perspective-reverse {
    0% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(100px);
        background-position: 50% 100%
    }
    50% {
        transform: perspective(1600px) rotateX(-5deg) rotateY(-5deg) translateZ(50px)
    }
    100% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
        background-position: -100% 100%
    }
}

@keyframes numbg-hover {
    0% {
        background-position: 200% 100%
    }
    100% {
        background-position: 50% 100%
    }
}

@keyframes numbg-reverse {
    0% {
        background-position: 50% 100%
    }
    100% {
        background-position: -100% 100%
    }
}
